<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="/js/jquery/jquery.min.js"></script>
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/bootstrap/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
		<link rel="stylesheet" href="/js/plugins/jquery_emoticon/css/base.css" />
		<script src="/js/bootstrap/js/bootstrap.js"></script>
		<script src="/js/common.js"></script>
		<script src="/js/plugins/jrender/jrender.js"></script>
		<script src="/js/plugins/jquery_emoticon/jquery.mb.emoticons.js"></script>
		<script src="/js/plugins/dialog/dialog.min.js"></script>
	</head>
	<script type="text/javascript">
		$(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
			var commentId = getParams().id;
			var authorId;
			var strategyId;
            $.get("/strategies/"+commentId+"/comments",function (data) {
                strategyId=data.strategy.id;
                authorId = data.user.id;
                $(".comment").renderValues(data,{
                    handler:function (ele,value) {
						ele.href="strategyCatalogs.html?strategyId="+value;
                    },
                    userinfo:function (ele,value) {
                        ele.href="mine/userProfiles.html?id="+value;
                    }
				});
                $("#comments").renderValues({list:data.commentList},{
                    handle:function (ele,value) {
						$(ele).html(value).emoticonize(true).show();
                    }
				});
                //显示评论的图片,拼接方式
                var imgshtml = "";
                var imgs = data.imgUrls.split(";");
                for (var i = 0; i < imgs.length - 1; i++) {
                    imgshtml += '<li><img  src="' + imgs[i] + '"></li>';
                }
                $(".comment-img").html(imgshtml);
                //显示星星评价
                var starhtml = "";
                for (var i = 0; i < data.starNum; i++) {
                    starhtml += '<i class="fa fa-star"></i>';
                }
                for (var i = data.starNum; i < 5; i++) {
                    starhtml += '<i class="fa fa-star-o"></i>';
                }
                $(".comment-star").html(starhtml);

            });


            //查询关注关系
			$.get("/users/getCurrentIdByTargetId", {currentId: user.id, targetId: authorId}, function (data) {
				//如果有关系,文本设置为取消关注,如果没有关系,文本设置为关注
				var followhtml;
                if (data.num) {
                    followhtml ="<i class="+'"fa fa-hand-o-left"'+"> </i> 取关";
				} else {
                    followhtml ="<i class="+'"fa fa-hand-o-right"'+"> </i> 关注";
				}
				$("#followBtn").html(followhtml);
			})

            $(".addcomment").click(function () {
                if(!user){
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "亲，还没登录不能评论哦！，",
                        buttons: [{
                            name: "马上登录",
                            callback: function() {
                                location.href = "/login.html";
                            }
                        }]
                    });
                    return;
				}
                window.location.href="userComment.html?id="+authorId
					+"&commentId="+commentId
					+"&strategyId="+strategyId;
            })


            $("#likeBtn").click(function () {
                if(!user){
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "亲，还没登录不能评论哦！，",
                        buttons: [{
                            name: "马上登录",
                            callback: function() {
                                location.href = "/login.html";
                            }
                        }]
                    });
                    return;
                }

                //发送请求更新点赞数
                $.post("/strategies/comments/likes",{userId:user.id,likeId:commentId,type:2},function (data) {
                    $("#likes").html(data.likeNum);
                    var btnhtml;
                    if(data.liked==1){//已经点赞
                        $(document).dialog({
                            type: 'notice',
                            infoText: '点赞成功',//提示
                            autoClose: 1500,//xx秒后自动消失
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                         btnhtml ="<i class="+'"fa fa-thumbs-up"'+"> </i> 取消";
                        $("#likeBtn").html(btnhtml);
					}else{
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已取消点赞',//提示
                            autoClose: 1500,//xx秒后自动消失
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                         btnhtml ="<i class="+'"fa fa-thumbs-o-up"'+"> </i> 点赞";
                        $("#likeBtn").html(btnhtml);
					}


                })
            })




			$("#followBtn").click(function () {
                $.get("/users/getCurrentIdByTargetId", {currentId: user.id, targetId: authorId}, function (data) {
                    //如果有关系,文本设置为取消关注,如果没有关系,文本设置为关注
                    var followhtml;
                    if (data.num) {
                        $.get("/users/delete", {currentId: user.id, targetId: authorId}, function (data) {
                            followhtml ="<i class="+'"fa fa-hand-o-right"'+"> </i> 关注";
                            $("#followBtn").html(followhtml);
                        });
                    } else {
                        $.get("/users/insert", {currentId: user.id, targetId: authorId}, function (data) {
                            followhtml ="<i class="+'"fa fa-hand-o-left"'+"> </i> 取关";
                            $("#followBtn").html(followhtml);
                        })
                    }
                    $("#followBtn").html(followhtml);
                })

			});


        })
	</script>
	<body>

	<div class="search-head">
		<div class="row nav-search">
			<div class="col">
				<a href="javascript:history.go(-1);">
					<span><i class="fa fa-chevron-left"></i></span>
				</a>
			</div>
			<div class="col">
				<span>点评详情</span>
			</div>
			<div class="col"></div>
		</div>
	</div>

	<div class="comment">
			<div class="container">
				<div class="row">
						<div class="col-2 comment-head">
							<a render-key="strategy.id" render-fun="userinfo">
								<img class="rounded-circle" render-src="user.headImgUrl">
							</a>
							<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
							<button class="btn" id="likeBtn"><i class="fa fa-thumbs-o-up"> </i> 点赞</button>
						</div>
						<div class="col">
							<span class="comment-star"></span>
							<i class="fa fa-calendar"><span class="comment-date" render-html="commentTime"></span></i>
							<div class="comment-content">
								<p render-html="comment"></p>
							</div>
							<ul class="comment-img img">
							</ul>

							<div class="comment-link">
								<a href="strategyCatalogs.html" render-key="strategy.id" render-fun="handler">
									<img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>
						</div>
				</div>
			</div>

			<div class="count d-flex justify-content-between">
				<div class="p-2">评论<span render-html="commentNum"></span></div>
				<div class="p-2">赞<span render-html="likes" id="likes"></span></div>
			</div>

		</div>


		<!--用户评论列表-->
		<div id="comments">
		<div render-loop="list">
			<div class="container row comment">
				<div class="col-2 comment-head">
					<a href="userProfiles.html">
						<img class="rounded-circle" render-src="list.user.headImgUrl">
					</a>
				</div>
				<div class="col comment-right">
					<span class="authorName" render-html="list.user.nickName"></span>
					<i class="fa fa-calendar"></i><span render-html="list.commentTime"></span>
					<div class="comment-content">
						<div  style="display:none" render-key="list.comment" render-fun="handle"></div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<!--结束-->


		<div class="comment-list">
			快来发表你的评论吧
		</div>
		
		<div class="operation">
			<div class="d-flex justify-content-between">
				<div class="p-2"><i class="fa fa-commenting-o addcomment"></i> 添加你的评论</div>
				<div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
			</div>
		</div>


</body>

</html>